<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div class="container-fluid">
        <h1>{{username}}的购物清单列表
            <small>清单总数
                <label class="label label-warning">{{cart.length}}</label>
            </small>
            <small>已采购总数
                <label class="label label-success">{{total}}</label>
            </small>
        </h1>
        <form>
            <div class="input-group">
                <input type="text" class="form-control" v-model="text" maxlength="30" placeholder="输入商品名称" required>
                <span class="input-group-btn">
                    <button class="btn btn-default" v-on:click.prevent="addcart">添加</button>
                </span>
            </div>
        </form>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>状态</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in cart" :key="index">
                    <td>{{item.product}}</td>
                    <td><input type="checkbox" v-model="item.state"> {{item.state | stateFilter}}</td>
                    <td><button v-on:click="del(index)" class="btn btn-default btn-xs">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el: '.container-fluid',
            data: {
                username: 'Rongle',
                text: '',
                cart: [
                    { product: "外套", state: false },
                    { product: "保暖衣", state: false },
                    { product: "夹克", state: true },
                    { product: "化妆品", state: false }
                ]
            },
            methods: {
                addcart: function () {
                    if (this.text == "") {
                        alert("product name is null")
                    } else {
                        this.cart.push({
                            product: this.text,
                            state: false
                        });
                        this.text = ''
                    }
                },
                del: function (index) {
                    this.cart.splice(index, 1)
                }
            },
            computed: {
                total: function () {
                    var j = 0;
                    for (var i in this.cart) {
                        if (this.cart[i].state) {
                            j += 1;
                        }
                    }
                    return j;
                }
            },
            watch: {
                
            },
            filters: {
                stateFilter: function (type) {
                    switch (type) {
                        case true:
                            return '已采购';
                        case false:
                            return '未采购';
                        default:
                            return '';
                    }
                }
            }
        })
    </script>
    <!-- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> -->
    <!-- <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->

</body>

</html>